﻿<div class="layui-card" id="lg-syslog">
    <div class="layui-card-header"><i class="fa fa-home fa-fw"></i>角色管理</div>
    <div class="layui-card-body" id="">
        <div class="lg-search lg-layout-row lg-layout-row-auto" skin="lg-form-inline">
            
            <div class="lg-search-item">
                <lg-form-singletext :data="{Title:'帐号'}" v-model:value="where.UserName"></lg-form-singletext>
            </div>
            <div class="lg-search-item" >
                <lg-form-select :data="{Title:'行为',Options:options.OperateType}" v-model:value="where.OperateType" val-type="value"></lg-form-select>
            </div>
            <div class="lg-search-item" >
                <lg-form-singletext :data="{Title:'关键词'}" v-model:value="where.Detail"></lg-form-singletext>
            </div>
            <div class="lg-search-item" >
                <lg-form-daterange :data="{Title:'日期',Name:'AddTime'}" v-model:value="where.DateRange"></lg-form-daterange>
            </div>
            <div class="lg-search-item layui-input-inline" style="width:auto">
                <button class="layui-btn" type="button" v-on:click="OnSearch">搜索</button>
            </div>
        </div>
        <div class="lg-table-body">
            <table class="lg-table">
                <thead>
                    <tr>
                        <th style="width:120px">账户</th>
                        <th style="width:80px">行为</th>
                        <th>事情详情</th>
                        <th style="width:120px">日期</th>
                        <th style="width:80px">详情</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="item in logs">
                        <td>{{item.UserName}}</td>
                        <td>{{item.OperateType}}</td>
                        <td>{{item.Detail}}</td>
                        <td>{{item.Time}}</td>
                        <td>
                            <a class="layui-btn layui-btn-xs layui-btn-normal" title="查看事件详情" v-on:click="info(item)"><span class="fa fa-pencil-square-o fa-fw"></span></a>
                        </td>
                    </tr>
                </tbody>

            </table>
            <div class="LgTable-NoData" v-if="logs.length==0">没有数据 ~</div>
        </div>
        <div id="logs-pager" style="margin-top:-10px;" v-show="logs.length>0"></div>
        <!-- 内容主体区域结束 -->
    </div>
</div>
<script type="module">
    import { freeForm } from '/plugins/lgform/lg.form.2.1.js?v=1'
    freeForm.addEventListener();
    frame.createPage({
        mounted: function() {
            var app = Vue.createApp({
                data() {
                    return {
                        logs: [],
                        options: {
                            OperateType: [
                                {Text:"不限",Value:""},
                                {Text:"添加",Value:"add"},
                                {Text:"删除",Value:"delete"},
                                {Text:"修改",Value:"edit"},
                                {Text:"审核",Value:"check"},
                                {Text:"导入",Value:"import"},
                                {Text:"迁移",Value:"move"},
                                {Text:"导出",Value:"export"},
                                {Text:"查看列表",Value:"getlist"},
                                {Text:"查看详情",Value:"getinfo"}
                            ]
                        },
                        where: {
                            Page:1,
                            Limit:10,
                            UserName:"",
                            OperateType:"",
                            Detail:"",
                            DateRange:""
                        }
                    }
                },
                mounted: function() {
                    this.GetLogs();
                },
                methods: {
                    GetLogs: function() {
                        lg.request({
                            url:"/base/getSysLogList?"+lg.obj.toUrl(this.where),
                            success: res => {
                                if (res.code == 0) {
                                    if (res.data != null) {
                                        this.logs = res.data;
                                        this.SetPage(res.count);
                                    } else {
                                        this.logs = [];
                                    }
                                } else {
                                    layer.msg(res.msg, {icon:2})
                                }
                            }
                        })
                    },
                    OnSearch: function() {
                        this.where.Page = 1;
                        this.GetLogs();
                    },
                    SetPage: function(count) {
                        var that = this;
                        layui.laypage.render({
                            elem: 'logs-pager'
                            , curr: that.where.Page
                            , limit: that.where.Limit
                            , count: count
                            , layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
                            , jump: function(obj, first) {
                                if (!first) {
                                    that.where.Page = obj.curr;
                                    that.where.Limit = obj.limit;
                                    that.GetLogs();
                                }
                            }
                        });
                    },

                }
            })
            freeForm.regComponent(app);
            app.mount("#lg-syslog")

        },
    }).mount();
</script>